<template>
	<div class="wallet">
		<div class="wallet-content">
			<div class="wallet-top">
				申请开票
				<img @click="back" src="@/assets/img/common_btn_return_n.png" alt="">
			</div>
		</div>
		<div class="apply-wrap">
		<div class="apply-date" >
			<span>2019年11月</span>
			<div class="apply-list">
				<div class="apply-item" v-for="(item,index) in list" @click='select(index)'>
					<div class="apply-item-left">
						<img v-if="item.isselect == false" src="@/assets/img/wallet_btn_notchecked.png" alt="">
						<img v-if="item.isselect " src="@/assets/img/wallet_btn_checked.png" alt="">
					</div>
					<div class="apply-item-middle">
						<div class="apply-item-middle-1"><img src="@/assets/img/wallet_icon_clock.png"/>11月30日 11:11</div>
						<div class="apply-item-middle-2"><img src="@/assets/img/wallet_icon_green.png"/><span>温州市星际控股集团有限公司</span></div>
						<div class="apply-item-middle-3"><img src="@/assets/img/wallet_icon_red.png"/><span>温州市星际控股集团有限公司</span></div>
					</div>
					<div class="apply-item-right">
						￥20.00
					</div>
				</div>
				<div class="line1"></div>
				
			</div>
		</div>
		<div class="apply-date">
			<span>2019年11月</span>
			<div class="apply-list">
				<div class="apply-item">
					<div class="apply-item-left">
						<img src="@/assets/img/wallet_btn_notchecked.png" alt="">
					</div>
					<div class="apply-item-middle">
						<div class="apply-item-middle-1"><img src="@/assets/img/wallet_icon_clock.png"/>11月30日 11:11</div>
						<div class="apply-item-middle-2"><img src="@/assets/img/wallet_icon_green.png"/><span>温州市星际控股集团有限公司</span></div>
						<div class="apply-item-middle-3"><img src="@/assets/img/wallet_icon_red.png"/><span>温州市星际控股集团有限公司</span></div>
					</div>
					<div class="apply-item-right">
						￥20.00
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="apply-add" @click='add' >提交申请</div>
	</div>
</template>

<script>
	import Global from '@/components/Global.vue'
	export default{
		data(){
			return{
				list:[
					{
						"id":1,
						"name":"1",
						"isselect":false
					},
					{
						"id":2,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
					{
						"id":3,
						"name":"1",
						"isselect":false
					},
				],
				selected:''
			}
		},
		methods:{
			back(){
				this.$router.push('/WalletOther');
			},
			select(index){
				if(this.list[index].isselect){
					this.list[index].isselect = false;
				}else{
					this.list[index].isselect = true;
				}
				var len = this.list.length;
				this.selected = '';
				for(var i=0; i<len; i++){
					if(this.list[i].isselect)
					this.selected += this.list[i].id + ',';
				}
				if(this.selected != ''){
					this.selected = this.selected.substr(0,this.selected.length-1);
				}
				console.log(this.selected);
				
			},
			add(){
				if(this.selected == ''){
					this.open('请选择发票', false);
					return;
				}
				var self = this;
				$.ajax({
					url: Global.serverIp + 'work/workform/applyWork',
					data: JSON.stringify({
						"title": "发票申请",
						"content": "发票申请",
						"type":1,
						"status":0,
						"orderCode":self.selected
					}),
					xhrFields: {
						withCredentials: true
					},
					beforeSend: function(request) {
						request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
					},
					contentType: 'application/json;charset=utf-8',
					dataType: 'json',
					type: 'post',
					success: function(res) {
						if (res.code == Global.success_code) {
							self.open(res.msg, false);
							// self.show_type = 0;
							// self.get_list();
						} else {
							self.open(res.msg, false);
						}
					},
					error: function(res) {
						if (res.responseJSON.code == '040005') {
							self.reLogin();
						} else {
							self.open("请求失败", false);
						}
					}
				})
				
			},
			reLogin() {
				var self = this;
				$.ajax({
					url: Global.serverIp + 'authorization/oauth/token?scope=read&grant_type=refresh_token&refresh_token=' +
						localStorage.getItem('refresh_token'),
					contentType: 'application/x-www-form-urlencoded',
					beforeSend: function(request) {
						request.setRequestHeader("Authorization", 'Basic dGVzdF9jbGllbnQ6dGVzdF9zZWNyZXQ=');
					},
					dataType: 'json',
					type: 'post',
					success: function(res) {
						localStorage.setItem("token", res.access_token);
						localStorage.setItem("refresh_token", res.refresh_token);
			
					},
					error: function(res) {
						self.open("请求失败", false);
						self.$router.push('/Login');
					}
				})
			},
			open(content, flag) {
				var self = this;
				this.$layer.toast({
					className: '', // 图标className 如果为空 toast位置位于下方,否则居中 
					content: content,
					time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒 
				});
			},
		}
	}
	import '@/assets/css/wallet.css'
</script>

<style>
	.apply-wrap{
		height: calc(100% - 140px);
		overflow: auto;
	}
	.apply-add{
		margin: 8px 12px;
		text-align: center;
		color: #1869E0;
		border: 1px solid #1869E0;
		border-radius: 24px;
		padding: 10px;
	}
	.apply-add:hover{
		background-color: #1869E0;
		color: #fff;
	}
	.apply-date{
		padding: 15px 12px 0px 12px;
	}
	.apply-date > span{
		color: #a6a6a6;
		font-size: 14px;
		margin-bottom: 6px;
		display: inline-block;
	}
	.apply-list{
		background-color: #fff;
		border-radius: 4px;
	}
	.apply-item{
		overflow: auto;
	}
	.line1{
		border-top: 1px solid #eaf2ee;
		margin-left: 55px;
	}
	.apply-item-left{
		padding: 0 21px;
		margin-top: 47px;
		float: left;
	}
	.apply-item-middle{
		float: left;
		position: relative;
	}
	.apply-item-middle img{
		margin-right: 7px;
		margin-bottom: 1.5px;
	}
	.apply-item-middle-1{
		margin-top: 15px;
		margin-bottom: 15px;
		color: #949799;
		font-size: 10px;
	}
	.apply-item-middle-2{
		margin-bottom: 12px;
		color: #35374B;
		font-size: 14px;
	}
	.apply-item-middle-2::before{
		content: "";
		height: 18px;
		border: 1px dashed #e4eaea;
		position: absolute;
		top: 64px;
		left: 2px;
	}
	.apply-item-middle-2 span ,.apply-item-middle-3 span{
		display: inline-block;
		width: 190px;
	}
	.apply-item-middle-3{
		margin-bottom: 16px;
		color: #35374B;
		font-size: 14px;
	}
	.apply-item-right{
		float: right;
		color: #01bf1b;
		font-size: 16px;
		margin-right: 12px;
		margin-top: 45px;
	}
</style>
